<template>
	<view v-if="a_id > -1">
<!-- 		<view v-if="BottomMenu.type != 3" class="h_da"></view>
		<view v-if="BottomMenu.type == 3" class="h_da_H"></view> -->
		<u-gap :height="GapHeight"></u-gap>
		<view class="tabbar_bg" v-bind:class="BottomMenu.show_text ? 'tabbar_bg_t' : ''" v-if="BottomMenu.type == 3" :style="!show_empty ? 'bottom:54rpx' : 'bottom:102rpx'">
			<vimage imgtype="1" src="static/images/tabbar1.png" mode="widthFix"></vimage>
		</view>
		<view
			class="bottom-items"
			:style="
				BottomMenu.type != 3
					? 'background-color: ' + BottomMenu.bgcolor.default + ';border-top: 1px solid ' + BottomMenu.line_color + ';height:' + height
					: 'height:' + height
			"
		>
			<view
				v-if="BottomMenu && BottomMenu.tablist.length > 0"
				class="btn_items"
				v-bind:class="((BottomMenu.tablist.length == 3 && i == 1) || (BottomMenu.tablist.length == 5 && i == 2)) && BottomMenu.type == 3 ? 'bulge' : ''"
				@click="Jumpurling(item.linkdata, i)"
				v-for="(item, i) in BottomMenu.tablist"
				:key="i"
				:style="a_id == i&&BottomMenu.type != 3 ? 'background-color:' + BottomMenu.bgcolor.checked : ''"
			>
				<view class="btn_text" v-bind:class="BottomMenu.show_text && BottomMenu.type == 3 ? 'show_text' : ''">
					<view class="icon-box">
						<block v-if="BottomMenu.type == 1">
							<text v-if="a_id != i" :style="'color:' + BottomMenu.iconcolor.default" :class="'txt iconfont ' + item.icon"></text>
							<text v-if="a_id == i" :style="'color:' + BottomMenu.iconcolor.checked" :class="'txt iconfont ' + item.icon"></text>
						</block>
						<block v-else>
							<vimage
								v-if="a_id != i"
								class="img-box"
								:src="item.url"
								v-bind:class="((BottomMenu.tablist.length == 3 && i == 1) || (BottomMenu.tablist.length == 5 && i == 2)) && BottomMenu.type == 3 ? 'bulge-img' : ''"
							></vimage>
							<vimage
								v-if="a_id == i"
								class="img-box"
								:src="item.active_url"
								v-bind:class="((BottomMenu.tablist.length == 3 && i == 1) || (BottomMenu.tablist.length == 5 && i == 2)) && BottomMenu.type == 3 ? 'bulge-img' : ''"
							></vimage>
						</block>
						<!-- <image v-else src="" mode=""></image> -->
						<view :style="'background:' + BottomMenu.num_color" class="btn_icon" v-if="cartnum > 0 && BottomMenu.shownum && item.linkdata.link == '../cart/cart'">
							{{ cartnum }}
						</view>
					</view>
					<block v-if="BottomMenu.show_text">
						<text v-if="a_id != i" class="text" :style="'color:' + BottomMenu.textcolor.default">{{ item.text }}</text>
						<text v-if="a_id == i" class="text" :style="'color:' + BottomMenu.textcolor.checked">{{ item.text }}</text>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import store from '@/store';
import util from '@/common/util.js';
export default {
	props: {
		PageId: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			a_id: -1,
			cartnum: 0,
			iscart: false,
			show_empty: false
		};
	},
	computed: {
		height() {
			if (this.show_empty) {
				return '170rpx';
			} else {
				return '120rpx';
			}
		},
		GapHeight(){
			let height=0
			if(this.BottomMenu.type==3){
				if (this.show_empty) {
					height=230;
				} else {
					height=180;
				}
			}else{
				if (this.show_empty) {
					height=170;
				} else {
					height=120;
				}
			}
			store.commit('setGapHeight', height);
			return height
			
		},
		...mapState({
			BottomMenu: state => state.BottomMenu,
			SystemInfo: state => state.SystemInfo
		})
	},

	created() {
		// #ifdef MP-WEIXIN
		this.show_empty=util.getShowType()
		// #endif
		const _this = this;
		this.gettabs();
		this.judgeLogin(
			() => {},
			() => {
				_this.gettrolley();
			}
		);
	},
	watch: {
		PageId() {
			this.gettabs();
		}
	},
	methods: {
		Jumpurling(data, i) {
			if (i == this.a_id) {
				return;
			}
			this.Jumpurl(data, 'switch');
		},
		gettrolley() {
			const param = {};
			this.$http('/trolley/count', param, 'GET').then(res => {
				const json = res.data;
				this.cartnum = json.msg;
			});
		},
		getbottommenu() {
			let params = {};
			this.$http('/fitment/bottom_menu', params, 'get').then(async res => {
				if (res.statusCode == 200) {
					await store.commit('setBottomMenu', res.data.msg);
					this.$nextTick(function() {
						if (res.data.msg) {
							this.gettabs();
						} else {
							this.BottomMenu = null;
						}
					});
				}
			});
		},
		gettabs() {
			if (this.PageId == 5) {
				this.iscart = true;
			} else {
				this.iscart = false;
			}
			if (this.BottomMenu && this.BottomMenu.tablist) {
				this.a_id = this.BottomMenu.tablist.findIndex(a => {
					return this.PageId == a.linkdata.id;
				});
				if (this.a_id > -1) {
					store.commit('sethastabbar', true);
				} else {
					store.commit('sethastabbar', false);
				}
			} else {
				this.getbottommenu();
			}
		},

		tabChange(index) {
			if (index === this.current) {
				return;
			}
			this.current = index;
			this.$emit('tabChange', index);
		}
	}
};
</script>

<style lang="scss" scoped>
.h_da {
	height: 120rpx;
	width: 100%;
}
.h_da_H {
	height: 180rpx;
	width: 100%;
}
.tabbar_bg {
	position: fixed;
	bottom: 0;
	width: 750rpx;
	image {
		width: 750rpx;
	}
	bottom: 28rpx;
	&.tabbar_bg_t {
		bottom: 54rpx;
	}
}

.bottom-items {
	display: flex;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #ffffff;
	z-index: 10000;
	// height: 120rpx;
	.btn_items {
		flex: 1;
		position: relative;
		.btn_text {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 12rpx 0 8rpx 0;
			.text {
				font-size: 24rpx;
			}
			.icon-box {
				height: 52rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 12rpx;
				position: relative;
				.txt {
					font-size: 52rpx;
					text-align: center;
					display: block;
				}
				.img-box {
					width: 52rpx;
					height: 52rpx;
					border-radius: 10rpx;
					/deep/image {
						border-radius: 10rpx;
					}
				}

				&.no_text {
					.img-box {
						width: 60rpx;
						height: 60rpx;
						border-radius: 10rpx;
					}
				}
			}
			&.show_text {
				// .icon-box {
				// 	height: 40rpx;
				// 	.img-box {
				// 		width: 40rpx;
				// 		height: 40rpx;
				// 		border-radius: 10rpx;
				// 	}
				// }
			}
		}

		&.bulge {
			top: -50rpx;
			z-index: 10;
			.bulge-img {
				border-radius: 50% !important;
				width: 104rpx !important;
				height: 104rpx !important;
				/deep/image {
					border-radius: 50% !important;
				}
			}
			.icon-box {
				height: auto;
				margin: 0;
			}
			.show_text {
				.text {
					margin-top: 10rpx;
					// position: absolute;
					// bottom: -34rpx;
					// top: 124rpx;
				}
			}
		}
		.btn_icon {
			position: absolute;
			top: -4rpx;
			right: -18rpx;
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			text-align: center;
			font-size: 24rpx;
			line-height: 36rpx;
			color: #fff;
		}
		// display: flex;
	}
}
</style>
